<!-- 商圈类型设置 -->
<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <GzSearchForm :searchFunc="searchFunc" :resetFunc="onReset" searchConditionNum="6">
        <gz-text-up v-model:value="searchData['searchText']" :placeholder="'类型编号/类型名称'" />
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="searchData['state']" placeholder="是否启用">
            <a-select-option value="">
              全部
            </a-select-option>
            <a-select-option value="1">
              是
            </a-select-option>
            <a-select-option value="0">
              否
            </a-select-option>
          </a-select>
        </a-form-item>
      </GzSearchForm>

      <!-- 列表渲染 -->
      <GzTable
        ref="infoTableRef"
        :init-data="true"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="searchData"
        row-key="sqlxNo"
      >
        <template #topBtnSlot>
          <a-button type="primary" @click="addFunc">
            <plus-outlined />新建
          </a-button>
        </template>

        <template #bodyCell="{ column, record }">
          
          <template v-if="column.key === 'state'">
            <a-badge v-if="record.state == '0'" status="error" text="停用" /> 
            <a-badge v-if="record.state == '1'" status="success" text="启用" /> 
          </template>
          <template v-if="column.key === 'updateTime'">
            {{ dayjs(record.eTime).format("YYYY-MM-DD HH:mm:ss") }}
          </template>
          <template v-if="column.key === 'num'">
            <a @click="viewSqDetialFun(record.sqlxNo)">{{ record.num || '' }}</a>
          </template>
              
          <template v-if="column.key === 'operation'">
            <!-- 操作列插槽 -->
            <GzTableColumns>
              <!-- <a-button type="link">查看下属商圈</a-button> -->
              <a-button type="link" @click="operLogFunc(record.sqlxNo)">操作记录</a-button>
              <a-button type="link" @click="editFunc(record.sqlxNo)">编辑</a-button>
              <a-button type="link" @click="delFunc(record.sqlxNo)">删除</a-button>
            </GzTableColumns>
          </template>
        </template>
      </GzTable>
    </a-card>
  </page-header-wrapper>
  
  <!-- 新增页面组件  -->
  <InfoAddOrEdit ref="infoAddOrEdit" :callback-func="searchFunc" />

  <!-- 新增页面组件  -->
  <OperLog ref="operLog"  />
  <!-- 下属商圈明细 -->
  <a-modal v-model:visible="vdata.sqmxVisible" width="1000px" title="下属商圈明细">
    <GroupList v-if="vdata.sqmxVisible" :sqlxNo="vdata.propSqlxNo" />
    <template #footer></template>
  </a-modal>

</template>

<script lang="ts" setup>
import { API_URL_BUSINESSCIRCLE_TYPESETTINGS, API_URL_MARKETING_PROXY_LIST,req,reqLoad } from '@/api/manage'
import { ref, reactive, getCurrentInstance ,onMounted} from 'vue'
import GroupList from '../businessCircleList/List.vue'
import InfoAddOrEdit from './AddOrEdit.vue'
import OperLog from './operLog.vue'
import router from '@/router'
import dayjs from 'dayjs'
import {useUserStore} from '@/store/modules/user'

const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties

// const AddOrEditRef = ref()
const vdata: any = reactive({
  sqmxVisible:false,
  propSqlxNo:''
})
const infoTableRef = ref()
let tableColumns = reactive([
  { key: 'sqlxNo', title: '商圈类型编号',dataIndex: 'sqlxNo',width: 120, minWidth: 120, maxWidth: 140 },
  { key: 'sqlxName', title: '类型名称',dataIndex: 'sqlxName', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'createPer', title: '创建人',dataIndex: 'createPer', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'updatePer', title: '最后修改人',dataIndex: 'updatePer', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'updateTime', title: '最后修改时间', dataIndex: 'updateTime', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'state', title: '是否启用', dataIndex: 'state', width: 80 },
  { key: 'num', title: '该类型商圈数量', dataIndex: 'num', width: 120,align: "center" },
  { key: 'operation', title: '操作', dataIndex: 'operation',width: 260, fixed: 'right', align: 'center' }
])

const searchData = ref({})
const infoAddOrEdit = ref()
const operLog = ref()

// 请求table接口数据
function reqTableDataFunc(params: any) {
  console.log('reqTableDataFunc')
  // var obj=Object.assign(params,{proxyNo:useUserStore().userInfo.belongInfoId})// 机构号
  // return req.list(API_URL_BUSINESSCIRCLE_TYPESETTINGS, obj)
  return Promise.resolve({
    total: 1,
    records:[
      {
        sqlxNo: 'SQLX00001',
        sqlxName: '商业综合体',
        createPer: '测试机构001',
        updatePer: 'admin',
        updateTime: '2023-12-07 14:38:00',
        state:'1',
        num:'11'
      },
      {
        sqlxNo: 'SQLX00002',
        sqlxName: '菜市场',
        createPer: '测试机构001',
        updatePer: 'admin',
        updateTime: '2023-12-07 14:38:00',
        state:'0',
        num:'10'
      }
    ]
  })
}

function searchFunc() {
  infoTableRef.value.refTable(true)
}
function onReset() {
  searchData.value = {}
}

// 操作记录
function operLogFunc (recordId: any) {
  operLog.value.show(recordId)
}

function addFunc () { // 业务通用【新增】 函数
  infoAddOrEdit.value.show()
}
function editFunc (recordId: any) { // 业务通用【修改】 函数
  infoAddOrEdit.value.show(recordId)
}
// 删除
function delFunc (recordId: any) {
  $infoBox.confirmDanger('确认删除？', '该操作将删除商户下所有配置及用户信息', () => {
    reqLoad.delById(API_URL_BUSINESSCIRCLE_TYPESETTINGS, recordId).then((res: any) => {
      infoTableRef.value.refTable(true)
      $infoBox.message.success('删除成功')
    })
  })
}

function viewSqDetialFun (recordId: any) { // 业务通用【修改】 函数
  vdata.propSqlxNo = recordId
  vdata.sqmxVisible = true
}



onMounted(() => {

})

</script>
